<!--  -->
<template>
    <div class=''>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="选择城市">
                <el-cascader style="width: 100%;" v-model="areaName" :options="areaData"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit"
                v-loading="loading"
                >保存</el-button>
                <el-button @click="handlerCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { useCascaderAreaData } from '@/utils/area'

import SalesApi from '@/api/sales'
import { ElMessage  } from "element-plus";
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            imageUrl: '',
            areaName:'',
            areaData: useCascaderAreaData(),
            title:'',
            loading:false ,
            areaId:''

        };
    },
    computed: {},
    watch: {},
    methods: {
        handlerCancel() {
          this.$router.back()
        },
        onSubmit(){
            const $this =this 
            const area = this.areaName
            
            if (area && area.length > 0) {
                this.province = area[0]
                this.city = area[1]
                this.district = area[2]
            }
            $this.loding = true 
            SalesApi.updateArea({
                province: $this.province,
                city: $this.city,
                district: $this.district,
                areaId:$this.areaId
            }, true)
                .then(result => {
                    const { code, msg } = result
                    $this.loding = false  
                    if (code === 1) {
                        ElMessage({
                            message: msg,
                            type: "success",
                        });
                        $this.$router.push('/saleeMan/Jurisdiction', { replace: true })
                    }
                })


        }
    },
    created() {
        const route = this.$route.query
        if (route.id) {
            this.areaId= route.id
            const value = route.value
            this.areaName =value.split('/')
        }  
    },
    mounted() {

    },
}
</script>
<style scoped></style>